<template>
	<view class="cartmianbox">
		<qi_navigation />

		<view v-if="Object.keys(store.state.qi_cart.getcartdata).length !== 0">
			<scroll-view scroll-y class="scroll">
				<view class="scrolllminbox">
					<view v-for="item in store.state.qi_cart.getcartdata">
						<qi_cartlist :goods="item" :showRadio="true" @radiochange="radiochange" :showsubtract="true"
							@emitaddsum="emitaddsum" @emitdelete="emitdelete"></qi_cartlist>
					</view>
				</view>
				<view class="mianbuttom">
					<radio :checked="selectParams" @tap="checkboxChange">
						全选
					</radio>
					<view>合计：{{ UserInfoNoParams }}</view>
					<view class="submitcss" @tap="Tapsubmit">结算</view>
				</view>
			</scroll-view>
		</view>
		<view v-else class="cartempty">
			<view>
				<image
					src="https://img0.baidu.com/it/u=103546618,3013933963&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
				</image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref,
		onMounted,
		getCurrentInstance,
		computed,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		getcategoods,
		deletecarts,
		patchcarts,
		addcarts
	} from '@/http/cate.js';
	import {
		useStore
	} from 'vuex';
	import {
		getaddress,
		addorders,
		getcarts,
		upcartnum,
		getpreview,

		upchecked
	} from '@/http/api.js';
	const store = useStore();
	const cartlist = ref()
	
	let {
		getters
	} = useStore();
	const {
		proxy
	} = getCurrentInstance();
	const deta = reactive({
		cartgoods: [],
		datalist: [],
		ddress: {}
	});
	let UserInfoNoParams = computed(
		() => getters['qi_cart/checkedGoodsAmount']
	);
	let gettotal = computed(() => getters['qi_cart/total'])
	let getcheckedCount = computed(() => getters['qi_cart/checkedCount'])
	let selectParams = computed(
		() => getters['qi_cart/total'] == getters['qi_cart/checkedCount']
	);
	onLoad(() => {
		proxy.islogin.islogin();
		getcatelist();
		// cartlist.value = store.state.qi_cart.getcartdata
	});
	onShow(() => {
		
		setBadge();
	});
	let total = computed(() => getters['qi_cart/total']);
	watch(total, (newValue, oldValue) => {
		setBadge();
	});
	let setBadge = () => {
		if (total.value !== 0) {
			uni.setTabBarBadge({
				index: 2,
				text: String(total.value)
			});
		} else {
			uni.removeTabBarBadge({
				//隐藏数字标
				index: 2
			});
		}
	};
	// 单选
	const radiochange = val => {
		let idarr = {
			cart_ids: []
		};
		store.state.qi_cart.getcartdata.map(item => {
			if (item.is_checked == 1) {
				idarr.cart_ids.push(item.id)
			}
		});
		upchecked(idarr).then(res => {});
		store.commit('qi_cart/updateGoodsStateCARTDATA', val);
	};
	const getcatelist = () => {
		getcarts().then(res => {
			console.log(res);
			if (res.status_code == 401) return
			if (Object.keys(res.data).length !==0 ) {
				deta.cartgoods = res.data;
				store.commit('qi_cart/GETCARTDATA', res.data);
			} else {
				store.state.qi_cart.getcartdata.map(list => {
					const cartlist = {
						goods_id: list.goods.id,
						num: list.num
					};
					addcarts(cartlist).then(res => {
						// num.value = num.value + 1 
						console.log(1111111);
					});
				})
			}
		});
	};
	// 全选
	const checkboxChange = () => {
		let idarr = {
			cart_ids: []
		};
		console.log(selectParams.value);
		// selectParams.value = !selectParams.value
		store.commit(
			'qi_cart/updateAllGoodsStateCARTDATA',
			!selectParams.value
		);
		if (!selectParams.value) {
			upchecked(idarr).then(res => {});
		} else {
			store.state.qi_cart.getcartdata.map(item => idarr.cart_ids.push(item.id));
			upchecked(idarr).then(res => {});
		}
	};
	// 提交
	const Tapsubmit = () => {
		// 没商品
		if (UserInfoNoParams.value <= 0) {
			proxy.islogin.showToast('请选择商品');
			return;
		}
		// 删除
		// 选择地址
		getpreview().then(res => {
			// 默认地址
			if (Object.keys(res.address).length !== 0) {
				let addressdefault = res.address.find(
					res => res.is_default == 1
				);
				let idarr = {
					cart_ids: []
				};
				// 地址
				addorders(addressdefault.id).then(res => {
					store.state.qi_cart.getcartdata.filter(item => item.is_checked == 1).map(list => {
						idarr.cart_ids.push(list.id)
						deletecarts(list.id).then(res => {});
						store.commit('qi_cart/deletecart', list.id);
					})
					if (Object.keys(res).length !== 0) {
						console.log(res);
						// 删除
						// store.state.qi_cart.getcartdata.filter(item => item.is_checked == 0).map(list => {
						// 		console.log(list);
						// 						deletecarts(list.id).then(resdelete => {
						// 						});
						// 					})
						uni.navigateTo({
							url: '/pages/cart/childer/orders/orders?id=' + res.id
						});
						// store.commit('qi_cart/deletecart',idarr);store.commit('qi_cart/deletecart',idarr);

					} else {
						proxy.islogin.showToast('请设置默认地址');
						uni.navigateTo({
							url: '/pages/my/childer/address/address'
						});
					}
				});
			} else {
				proxy.islogin.showToast('请设置地址');
				uni.navigateTo({
					url: '/pages/my/childer/address/address'
				});
			}
		});
	};
	// 更新数量
	const emitaddsum = num => {
		console.log(num);
		// let id = num.id;
		upcartnum(num.id, num.num).then(res => {
			// getcatelist()
		});

	};
	// 删除
	const emitdelete = id => {
		console.log(id, '删除');

		let idarr = {
			cart_ids: []
		};
		deletecarts(id).then(res => {});
		store.commit('qi_cart/deletecart', id);
	};
</script>

<style lang="scss">
	.cartmianbox {
		position: relative;
		height: 100vh;

		.scroll {
			// #ifdef H5 
			height: calc(100vh - 100px - var(--window-bottom));

			.scrolllminbox {
				padding-bottom: 50px;
			}

			//#endif
			// #ifndef H5 
			height: calc(100vh - 100px - var(--window-bottom));
			// #endif
		}

		.cartempty {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.mianbuttom {
			position: fixed;
			left: 0;
			bottom: 50px;
			right: 0;
			display: flex;
			justify-content: space-between;
			padding: 10px 10px;
			height: 50px;
			line-height: 50px;
			align-items: center;
			box-sizing: border-box;
			background-color: #fff;

			.submitcss {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 120rpx;
				border-radius: 10px;
				color: #fff;
				height: 100%;
				background-color: red;
			}
		}
	}
</style>